<template>
  <div class="purchase-orders">
    <a-page-header
      title="采购订单"
      sub-title="采购订单管理"
    >
      <template #extra>
        <a-button type="primary">
          <PlusOutlined />
          新建采购单
        </a-button>
      </template>
    </a-page-header>

    <!-- 搜索区域 -->
    <a-card style="margin-bottom: 16px;">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="订单编号">
          <a-input v-model:value="searchForm.orderNo" placeholder="请输入订单编号" />
        </a-form-item>
        <a-form-item label="供应商">
          <a-select v-model:value="searchForm.supplier" placeholder="请选择供应商" style="width: 200px;">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="新鲜果业">新鲜果业有限公司</a-select-option>
            <a-select-option value="优质蔬菜">优质蔬菜供应商</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px;">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="draft">草稿</a-select-option>
            <a-select-option value="pending">待审批</a-select-option>
            <a-select-option value="approved">已审批</a-select-option>
            <a-select-option value="received">已收货</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary">
            <SearchOutlined />
            搜索
          </a-button>
          <a-button style="margin-left: 8px;">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 订单列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="orders"
        :loading="loading"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'totalAmount'">
            ¥{{ record.totalAmount.toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">查看</a-button>
              <a-button type="link" size="small" v-if="record.status === 'draft'">编辑</a-button>
              <a-button type="link" size="small" v-if="record.status === 'pending'">审批</a-button>
              <a-button type="link" size="small" v-if="record.status === 'approved'">收货</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  PlusOutlined,
  SearchOutlined,
} from '@ant-design/icons-vue'

const searchForm = reactive({
  orderNo: '',
  supplier: '',
  status: ''
})

const columns = [
  { title: '订单编号', dataIndex: 'orderNo', key: 'orderNo' },
  { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
  { title: '订单日期', dataIndex: 'orderDate', key: 'orderDate' },
  { title: '预计到货日期', dataIndex: 'expectedDate', key: 'expectedDate' },
  { title: '订单金额', dataIndex: 'totalAmount', key: 'totalAmount' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

const orders = ref([
  {
    id: 1,
    orderNo: 'PO202401001',
    supplier: '新鲜果业有限公司',
    orderDate: '2024-01-15',
    expectedDate: '2024-01-18',
    totalAmount: 12500,
    status: 'pending'
  },
  {
    id: 2,
    orderNo: 'PO202401002',
    supplier: '优质蔬菜供应商',
    orderDate: '2024-01-14',
    expectedDate: '2024-01-17',
    totalAmount: 8900,
    status: 'approved'
  },
  {
    id: 3,
    orderNo: 'PO202401003',
    supplier: '新鲜果业有限公司',
    orderDate: '2024-01-13',
    expectedDate: '2024-01-16',
    totalAmount: 15600,
    status: 'received'
  }
])

const loading = ref(false)
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
})

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    draft: 'default',
    pending: 'orange',
    approved: 'blue',
    received: 'green'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    draft: '草稿',
    pending: '待审批',
    approved: '已审批',
    received: '已收货'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.purchase-orders {
  padding: 24px;
}
</style>